* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
h4 {
  color: #d81e06;
}
.move_800 {
  transform: translateX(-800px);
}
.move_1600 {
  transform: translateX(-1600px);
}
body {
  width: 100vw;
  height: 100vh;
  background-image: url(./img/bg0.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
}
body .box {
  width: 800px;
  height: 500px;
  border-radius: 10px;
  background: #f1f3f4;
}
body .box header {
  height: 60px;
  box-shadow: 0 2px 3px #e3dbd0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body .box header .logo {
  margin-left: 20px;
}
body .box header .logo .fa-spinner {
  font-size: 40px;
  color: #d81e06;
}
body .box header .logo span {
  font-size: 28px;
  color: #d81e06;
}
body .box header .music {
  animation: player_rotate 8s infinite linear forwards;
}
body .box header .musicStop {
  animation-play-state: paused;
}
body .box header .form_group {
  width: 380px;
  height: 30px;
  background: #fff;
  border-radius: 15px;
  margin-right: 40px;
  padding: 0 20px;
}
body .box header .form_group input {
  width: 315px;
  height: 30px;
  border: none;
  outline: none;
}
body .box header .form_group img {
  vertical-align: middle;
  width: 20px;
  height: 20px;
}
body .box main {
  width: 800px;
  height: 440px;
  overflow: hidden;
}
body .box main .sections {
  width: 2400px;
  display: flex;
}
body .box main .sections section {
  width: 800px;
}
body .box main .sections .home .recommends,
body .box main .sections .home .history,
body .box main .sections .home .collection {
  margin: 40px 50px;
}
body .box main .sections .home ul {
  width: 600px;
  padding-left: 10px;
}
body .box main .sections .home ul li {
  display: inline-block;
  padding: 0 10px;
  height: 26px;
  margin: 10px;
  font-size: 14px;
  line-height: 26px;
  border-radius: 10px;
  background-color: #e7eaed;
  cursor: pointer;
}
body .box main .sections .home .noLike,
body .box main .sections .home .noHistory {
  font-size: 12px;
  color: gray;
  line-height: 32px;
}
body .box main .sections .results {
  overflow: hidden;
  position: relative;
  height: 440px;
}
body .box main .sections .results ul {
  padding: 10px 20px;
  height: 440px;
  width: 817px;
  overflow: auto;
}
body .box main .sections .results ul li {
  height: 30px;
  margin: 10px;
  border-radius: 2px;
  background-color: #ebe2d9;
  padding: 0 10px;
  line-height: 30px;
  font-size: 14px;
}
body .box main .sections .results ul li img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  cursor: pointer;
}
body .box main .sections .results ul li .mv {
  float: right;
  margin-top: 5px;
}
body .box main .sections .results .video {
  width: 800px;
  height: 440px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #777676;
  overflow: hidden;
  z-index: 1;
}
body .box main .sections .results .video img {
  width: 20px;
  height: 20px;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  cursor: pointer;
}
body .box main .sections .results .video video {
  width: 700px;
  height: 390px;
  margin: 0 50px;
}
body .box main .details main {
  height: 380px;
  display: flex;
}
body .box main .details main .animation {
  flex: 1;
  position: relative;
}
body .box main .details main .animation .player_bar {
  width: 120px;
  height: 90px;
  position: absolute;
  top: -20px;
  left: 200px;
}
body .box main .details main .animation .player_bar_rotate {
  transform: rotate(22deg);
  transform-origin: top left;
}
body .box main .details main .animation .player_bar_pausing {
  transform: rotate(0);
  transform-origin: top left;
}
body .box main .details main .animation .records {
  margin-top: 50px;
  margin-left: 80px;
  height: 280px;
  width: 280px;
  position: relative;
}
body .box main .details main .animation .records img {
  width: 280px;
  height: 280px;
  position: absolute;
}
body .box main .details main .animation .records .cover {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  left: 60px;
  top: 60px;
}
body .box main .details main .animation .player_rotate {
  animation: player_rotate 8s infinite linear forwards;
}
body .box main .details main .animation .player_pausing {
  animation-play-state: paused;
}
body .box main .details main .animation .info {
  margin-left: 60px;
  line-height: 60px;
}
body .box main .details main .animation .info .arts {
  display: inline-block;
  text-align: center;
  margin-left: 20px;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
body .box main .details main .animation .info i {
  color: #b9b9b9;
  cursor: pointer;
  font-size: 20px;
}
body .box main .details main .animation .info .red_heart {
  color: red;
}
body .box main .details main .line {
  width: 2px;
  height: 400px;
  margin-top: 10px;
  background: linear-gradient(#f1f3f4, #b9b9b9, #f1f3f4);
}
body .box main .details main .comments {
  margin: 10px 10px;
  width: 340px;
  height: 380px;
  overflow: hidden;
}
body .box main .details main .comments .no_comments {
  font-size: 12px;
  color: gray;
  line-height: 32px;
}
body .box main .details main .comments ul {
  overflow: auto;
  height: 380px;
  width: 357px;
}
body .box main .details main .comments ul li {
  padding: 20px 10px;
  border-bottom: 2px solid #e8e8e8;
  font-size: 14px;
}
body .box main .details main .comments ul li img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
}
body .box main .details main .comments ul li span {
  display: block;
  width: 270;
  margin-left: 50px;
  margin-right: 10px;
  line-height: 18px;
}
body .box main .details main .comments ul li:nth-last-of-type(1) {
  border: none;
  margin-bottom: 50px;
  position: relative;
}
body .box main .details main .comments ul li:nth-last-of-type(1)::after {
  content: "------------我也是有底线的哦------------";
  display: block;
  width: 340px;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -20px;
  color: gray;
  margin: 10px auto;
}
body .box main .details audio {
  width: 800px;
  height: 60px;
  border-radius: none;
  outline: none;
}
body .video {
  width: 800px;
  height: 520px;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #777676;
  z-index: -1;
}
@keyframes player_rotate {
  to {
    transform: rotate(360deg);
  }
}
